<template>
  <div class="common-layout">
    <el-row :gutter="20">
      <el-col :sm="24" :lg="24" style="padding-left: 20px">
        <el-form style="margin-top: 20px" :model="queryParam" ref="queryRef" :inline="true">

          <el-form-item label="书名" prop="ipaddr">
            <el-select style="width: 200px" clearable v-model="queryParam.book" placeholder="书名">
              <el-option v-for="item in 7" :key="item" :label= "`${('book')}${item}`" :value= "`${('book')}${item}`" />
            </el-select>
          </el-form-item>

          <el-form-item label="单元名称" prop="ipaddr">
            <el-select style="width: 200px" clearable v-model="queryParam.unit" placeholder="单元名称">
              <el-option v-for="item in 6" :key="item" :label= "`${('unit')}${item}`" :value= "`${('unit')}${item}`" />
            </el-select>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="searchByUnit">筛选</el-button>
            <el-button icon="Refresh" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-form>
        <el-row style="font-size: 12px">记录列表</el-row>
        <el-table border :data="wordStudyList" >
          <el-table-column label="书名" width="80" align="center" prop="book" />
          <el-table-column label="单元" width="80" align="center" prop="unit" />
          <el-table-column label="正确个数" align="center" prop="correctNum" />
          <el-table-column label="总个数" align="center" prop="wordNum" />
          <el-table-column label="练习时间" width="180" align="center" prop="createTime" />
          <el-table-column label="完成率" align="center" prop="correctRate" >
            <template #default="scope">
              <span>{{ parseInt(scope.row.correctRate * 100).toFixed(0) }}%</span>
            </template>
          </el-table-column>
          <el-table-column label="用时" align="center" prop="usedTime" />
          <el-table-column label="详情" align="center" width="80" class-name="small-padding fixed-width">
            <template #default="scope">
              <el-button link @click="getPracticeDetails(scope.row)" type="primary">查看</el-button>
            </template>
          </el-table-column>
        </el-table>

        <pagination
            style="margin-right: 20px"
            v-show="total > 0"
            :total="total"
            v-model:page="queryParam.pageNum"
            v-model:limit="queryParam.pageSize"
            @pagination="handleQuery"
        />
      </el-col>
    </el-row>

    <el-dialog style="padding: 20px" title="测试结果" v-model="testResultWindow" width="900px" append-to-body>
      <el-row type="flex" justify="center">
        <el-text style="font-size: 18px;color: rebeccapurple">
          本次练习次数:{{ practiceTotal }} --- 错误次数:{{practiceError}} --- 正确次数:{{practiceCorrect}}
        </el-text>
      </el-row>
      <el-table :data="testCompleteData">
        <el-table-column label="书名" width="80" align="center" prop="book"/>
        <el-table-column label="单元" width="80" align="center" prop="unit"/>
        <el-table-column label="中文名" align="center" prop="chinese"/>
        <el-table-column label="词性" width="60" align="center" prop="type"/>
        <el-table-column label="单词/词组" align="center" prop="name"/>
        <el-table-column label="我的拼写" align="center" prop="nameAgain"/>
        <el-table-column label="测试结果" width="100" align="center" prop="result">
          <template #default="scope">
            <dict-tag :options="word_test_status" :value="scope.row.result"/>
          </template>
        </el-table-column>
        <el-table-column v-if="false" label="测试时间" width="180" align="center" prop="time"/>
      </el-table>
    </el-dialog>

  </div>
</template>

<script setup >
import {ref} from "vue";
import {getTestDetailsList, getWriteDetailsList, listStudyPage} from "@/api/word/index.js";
import {listStudy_record, write_list_ByUser} from "@/api/word/wordRecord.js";
import useUserStore from "@/store/modules/user.js";

const { proxy } = getCurrentInstance()
const {word_test_status} = proxy.useDict("word_test_status")
let queryParam = ref({
  unit: '',
  book: '',
  userId: useUserStore().id,
  type: 'write',
  pageNum: 1,
  pageSize: 10
})

let total = ref(0)
let testResultWindow = ref(false)
let testCompleteData = ref([])
let wordStudyList = ref([])

//弹窗标题
let practiceTotal = ref(0)
let practiceError = ref(0)
let practiceCorrect = ref(0)

initPage()

function initPage(){
  queryParam.value.pageNum = 1
  queryParam.value.type = 'write'
  handleQuery()
}

function searchByUnit(){
  if(queryParam.value.unit === undefined){
    proxy.$modal.msgWarning("请选择单元")
    return
  }
  if (queryParam.value.book === undefined) {
    proxy.$modal.msgWarning("请选择书名")
    return
  }
  proxy.$modal.msg("查询的书名:" + queryParam.value.book +  "  课程名称:" + queryParam.value.unit)
  handleQuery()
}

function handleQuery() {
  // console.log(queryParam.value)
  write_list_ByUser(queryParam.value).then(res => {
    // console.log(res)
    wordStudyList.value = res.rows
    total.value = res.total
  })
}

function resetQuery() {
  queryParam.value.unit = null
  queryParam.value.book = null
  initPage()
}

function getPracticeDetails(row) {
  // console.log(row)
  if (row.practice === undefined || row.practice === null) {
    proxy.$modal.msgWarning("此记录详情未开放")
    return
  }

  let query = {
    practice : row.practice,
  }
  // console.log(query)
  getWriteDetailsList(query).then((res) => {
    if (res.code === 200) {
      // console.log(res)
      testResultWindow.value = true
      testCompleteData.value = res.data
      practiceTotal.value = res.data.length

      let filter = testCompleteData.value.filter(item => item.result === false);
      // console.log(filter)
      practiceError.value = filter.length
      practiceCorrect.value = practiceTotal.value - practiceError.value
    }
  })
}
</script>

<style scoped lang="scss">
.header {
  margin-top: 20px;
  margin-left: 20px;
}
</style>
